<template>
	<view class="work-container">
		<view style="display: block;position: relative;height: 45px;background-color: white;">
			<div class="login-button2">
				<image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"></image>
			</div>
			<div class="login-button">
				<view @click="turnLogin" v-if="!avatar">
					登录
				</view>
			</div>
			<div class="search-container" @click="gotoSearch()">
				<icon class="searchcion" size='16' type='search'></icon>
				<text type="text" class="search">搜你想搜,想你所想</text>
			</div>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item) in ActivityList.slice(0, 3)" :key="item">
					<image class='rounded-image' :src="item.img" @click="gotoActivity(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 宫格组件 -->
		<uni-section title="功能" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="3" :showBorder="false" @change="changeGrid">
				<uni-grid-item>
					<view class="grid-item-box">
						<navigator url="/pagesB/my/myregister" hover-class="navigator-hover">
							<image src="../../static/images/添加.png"></image>
							<text class="text">我的报名</text>
						</navigator>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<navigator url="/pagesB/activity/list" hover-class="navigator-hover">
							<image src="../../static/images/活动.png"></image>
							<text class="text">活动列表</text>
						</navigator>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<navigator url="/pagesB/weather/weather" hover-class="navigator-hover">
							<image src="../../static/images/天气.png"></image>
							<text class="text">查看天气</text>
						</navigator>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-section title="活动推荐" type="line"></uni-section>
		<view style="height: 5px;background-color: #efeff0;"></view>
		<view class="container">
			<view class="item" v-for="(item) in ActivityList.slice(3)" :key="item" @click="gotoActivity(item)">
				<image :src="item.img"></image>
				<view class="title">{{ item.title }}</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
	</view>
</template>

<script>
	import {
		listActivity
	} from '@/api/activity/activity.js'
	export default {
		data() {
			return {
				loadStatus: 'nomore',
				current: 0,
				swiperDotIndex: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				ActivityList: [],
				resultList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 5,
				},
				pageCount: 0,
			}
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1
			this.getData()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				this.queryParams.pageNum += 1
				this.getData()
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			turnLogin() {
				wx.navigateTo({
					url: '/pages/login',
					success() {}
				});
			},
			gotoSearch() {
				wx.navigateTo({
					url: '/pages/search/search',
					success() {}
				});
			},
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				// this.$modal.showToast('模块建设中~')
			},
			getData() {
				this.loadStatus = 'loading'
				listActivity(this.queryParams).then(res => {
					console.log(1)
					console.log(res.rows)
					this.dataHandle(res)
				})
			},
			dataHandle(res) {
				if (this.queryParams.pageNum === 1) {
					this.resultList = []
				}
				console.log(res)
				this.pageCount = (res.total / this.queryParams.pageSize)
				console.log(this.pageCount)
				if (this.queryParams.pageNum >= this.pageCount + 1) {
					this.loadStatus = 'nomore'
				} else if (this.queryParams.pageNum) {
					this.loadStatus = 'more'
					this.resultList = res.rows;
					this.resultList.forEach(item => {
						item.img = this.imageBasePath + item.img;
					})
					console.log(this.resultList)
					this.ActivityList = [...this.ActivityList, ...this.resultList]
					console.log(this.ActivityList, "sb")
				}
				uni.stopPullDownRefresh()
			},
			gotoActivity(item) {
				console.log(item.id, "ooooo")
				const selectedActivityId = item.id;
				uni.setStorageSync('activityId', selectedActivityId);
				console.log(selectedActivityId, "bbbbbb")
				wx.navigateTo({
					url: '/pagesB/activity/detail',
					success() {}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	image{
		height: 30px;
		width:30px;
	}
	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 5rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1px 0;
	}

	navigator {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	/*  搜索框 */
	.search-container {
		position: absolute;
		top: 7px;
		left: 20%;
		/* 将水平位置设置为50% */
		width: 75%;
		height: 30px;
		display: flex;
		align-items: center;
		padding: 8px;
		border-radius: 20px;
		background-color: #efeff0;

	}

	.search-icon {
		margin-right: 8px;
	}

	.search {
		flex: 1;
		border: none;
		margin-left: 5px;
		background-color: transparent;
		text-align: center;
		font-size: 14px;
		color: #b9b9b9;
	}

	/*圆形登录按钮*/
	.login-button {
		position: absolute;
		top: 2px;
		left: 4%;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		border: 1px solid #ccc;
		display: flex;
		color: #acacac;
		align-items: center;
		justify-content: center;
		font-size: 9px;
	}

	.login-button2 {
		position: absolute;
		top: 2px;
		left: 4%;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
	}

	/*轮播图部分*/
	.uni-margin-wrap {
		margin-top: 5px;
		width: 100%;
		height: 403rpx;
		background-color: #efeff0;
	}

	.swiper {
		height: 400rpx;
		margin: 5px;
		border-radius: 5px;
		overflow: hidden;
		transform: translateY(0);
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.rounded-image {
		width: 100%;
		height: 100%;
		/* 根据需要调整圆角半径 */
	}

	.item image {
		display: block;
		height: 170px;
		width: 95%;
		margin: 5px;
		justify-content: center;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		height: 100%;
		width: 100%;
		flex-direction: row;
		justify-content: start;
		background-color: #efeff0;
	}

	.title {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 10px;
	  font-weight: bolder;
	  word-wrap: break-word;
	  word-break: break-all;
	  white-space: normal;
	  text-align: center;
	  margin-left: 20px;
	  margin-right: 20px;
	}

	.item {
		justify-content: center;
		background-color: white;
		position: relative;
		height: 240px;
		width: 46%;
		padding-bottom: 5px;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 5px;
		border-radius: 10px;
		overflow: hidden;
	}

	.grid-body {
		background-color: white;
		border: 1px solid gainsboro;
		padding-bottom: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		border-radius: 10px;
	}
</style>